<template>
    <a-row type="flex" align="middle">
        <a-col v-if="typeof index === 'number'">
          <div class="item-id">
            {{itemId}}
          </div>
        </a-col>
        <a-col style="width:110px;padding-right: 5px">
            <a-select v-model="value.type" v-on:on-change="changeType">
                <a-select-option v-for="(item, index) in timeTypes()" :value="item.value" :key="index">{{ item.label }}</a-select-option>
            </a-select>
        </a-col>
        <a-col v-if="value.type === 'absolute_time'" style="width:230px;padding-right: 5px">
            <a-range-picker format="YYYY-MM-DD" v-model:value="dateValue"  v-on:change="changeDate"></a-range-picker>
        </a-col>

        <a-col v-if="value.type === 'relative_time'" style="width:230px;padding-right: 5px">
            <span style="margin-right: 5px">过去</span>
            <a-input-number :min="0" v-model="startDay" style="width: 50px;margin-right: 5px"></a-input-number>
            <span style="margin-right: 5px">天 ~ </span>
            <a-input-number :min="0" v-model="endDay" style="width: 50px;margin-right: 5px"></a-input-number>
            <span style="margin-right: 5px">天</span>
        </a-col>
        <a-col>
          <a-button v-if="showRemoveButton" v-on:click="removeItem">删除分组</a-button>
        </a-col>
    </a-row>
</template>


<script>/**
 time对象格式为：
 {
    "type": "absolute_time",
    "values": [
        "2019-07-10",
        "2019-07-11"
    ]
 }
 或者
 {
    "type": "relative_time",
    "values": [
        "3,1,day",  //表示过去3天到1天之间
    ]
 }
 */
    import {getDay} from "@/utils/util";

    export default {
        name: "ComplexTimeRange",
        props: {
            value: Object,
            id: String,
            index: Number,
            showRemoveButton: Boolean,
        },
        data: function () {
            return {
                // type: 'absolute_time',
                dateValue: [
                    getDay(-7),
                    getDay(0)
                ],
                startDay: 1,
                endDay: 0
            }
        },
        methods: {
            getInitialValue: function() {
                switch(this.value.type) {
                    case 'absolute_time':
                        if(this.value.values.length === 2) {
                            this.dateValue = this.value.values;
                        }
                        break;
                    case 'relative_time':
                        if(this.value.values.length === 1) {
                            let tokens = this.value.values[0].split(",");
                            if(tokens.length === 3) {
                                this.startDay = parseInt(tokens[0]);
                                this.endDay = parseInt(tokens[1]);
                            }
                        }
                        break;
                    default:
                        break;
                }
            },
            timeTypes: function () {
                return [
                    {
                        value: "absolute_time",
                        label: "固定时间"
                    },
                    {
                        value: "relative_time",
                        label: "相对时间"
                    }
                ];
            },
            changeType: function (selectedValue) {
                switch (selectedValue) {
                    case 'absolute_time':
                        this.value.values.splice(0, this.value.values.length);
                        this.value.values.push(this.dateValue[0], this.dateValue[1]);
                        break;
                    case 'relative_time':
                        this.value.values.splice(0, this.value.values.length);
                        this.value.values.push([this.startDay, this.endDay, 'day'].join(","));
                        break;
                    default:
                        break;
                }
            },
            changeDate: function(selectedDate, type) {
                this.value.values.splice(0, this.value.values.length);
                this.value.values = [selectedDate[0].format('YYYY-MM-DD'),selectedDate[1].format('YYYY-MM-DD')];
            },
            removeItem: function (){
              this.$emit("removeItem",this.index)
            }
        },
        watch: {
            startDay(now, before) {
                this.value.values.splice(0, this.value.values.length)
                this.value.values.push([now, this.endDay, 'day'].join(","));
            },
            endDay(now, before) {
                this.value.values.splice(0, this.value.values.length)
                this.value.values.push([this.startDay, now, 'day'].join(","));
            }
        },
        computed:{
          itemId (){
            return String.fromCharCode(65 + this.index)
          }
        },
        mounted() {
            this.getInitialValue();
        }
    }
</script>

<style scoped>
.item-id{
  color: #222d32;
  font-weight: bold;
  text-align: center;
  height: 100%;
  width: 30px;
  padding-left: 3px;
  padding-right: 3px;
  margin-right: 5px;
  background-color: rgba(21, 19, 149, 0.52);
}
</style>
